<template>
	<z-nav-bar title="方案详情" transparentTitle="auto"></z-nav-bar>
	<view class="content">
		<view class="flex_sbc">
			<view class="z-font-32 text-w u-line-1">{{ schemeData.name }}</view>
			<view v-if="!schemeData.readOnly" class="flex_cc flex_sh" @click="editScheme">
				<image :src="setting.oss_pub_domain + '/app-img/icon/icon_edit.png'" class="icon-size-32"></image>
				<view class="uni-color-main">编辑</view>
			</view>
		</view>
		<view class="z-font-32 text-w uni-mt-40">方案描述</view>
		<view class="uni-585C66 uni-mt-10">{{ schemeData.description }}</view>
		<z-preview-media :srcStr="schemeData.material"></z-preview-media>
		<view class="z-font-32 text-w uni-mt-40">关联标签</view>
		<view class="uni-mt-24">
			<view v-if="schemeData.descriptionTagName" class="flex_fsc uni-mb-12">
				<view class="tag-item flex_sh">描述标签</view>
				<view>
					<view :class="{'uni-mt-16': index}" v-for="(item, index) in schemeData.descriptionTagName.split(',')" :key="index">
						{{ item }}
					</view>
				</view>
			</view>
			<view v-if="schemeData.environmentName" class="flex_fsc uni-mb-12">
				<view class="tag-item flex_sh">训练环境</view>
				<view>
					<view :class="{'uni-mt-16': index}" v-for="(item, index) in schemeData.environmentName.split(',')" :key="index">
						{{ item }}
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="z-font-32 text-w uni-mt-40">
			关联问题：{{ schemeData.questionList ? schemeData.questionList.length : 0 }}个
		</view> -->
		<view v-if="schemeData.questionList" class="uni-mt-28">
			<view v-for="(question, index) in schemeData.questionList" :key="question.id" class="uni-585C66 uni-mb-4">
				{{ index + 1 }}.{{ question.name }}
			</view>
		</view>
	</view>
</template>

<script setup>
import { getSchemeDetail } from '@/api/scheme';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
const eventChannel = that.getOpenerEventChannel();

const schemeData = reactive(uni.getStorageSync('edit-scheme') || {});
let del = 0;

onShow(() => {
	if (!del && !schemeData.readOnly)
		!del &&
			getSchemeDetail(schemeData.id).then((res) => {
				Object.assign(schemeData, res);
				uni.setStorageSync('edit-scheme', res);
			});
});

function editScheme() {
	uni.navigateTo({
		url: '/pages/scheme/add/add',
		events: {
			editDone: (data) => {
				Object.assign(schemeData, data);
				eventChannel.emit('editDone');
			},
			delDone() {
				del = 1;
				eventChannel.emit('editDone');
				uni.navigateBack();
			}
		}
	});
}
</script>

<style lang="scss">
page {
	background: linear-gradient(to bottom, #eae9f9, #eae9f9 600rpx, #ffffff 600rpx, #ffffff);
}

.content {
	width: 100vw;
	box-sizing: border-box;
	padding: calc(var(--status-bar-height) + 44px + 32rpx) 32rpx 32rpx;
	background-color: #ffffff;
	border-radius: 32rpx 32rpx 0 0;
}

.tag-item {
	width: 112rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	background: #fbf1ee;
	border-radius: 8rpx;
	color: #ff7742;
	font-size: 24rpx;
	margin-right: 24rpx;
}
.video-box {
	width: 686rpx;
	height: 384rpx;
	border-radius: 16rpx;
	background: #f5f5f5;
	margin-top: 20rpx;
}

.img-video {
	width: 156rpx;
	height: 156rpx;
	flex-shrink: 0;
	margin: 16rpx 16rpx 0 0;
}
</style>
